<template>
    
        <el-container class="outer">
            <el-aside class="aside">
                <!-- 侧边框 @open="handleOpen" @close="handleClose"-->
                <el-menu active-text-color="#ffd04b" background-color="#545c64" class="el-menu-vertical-demo"
                    default-active="/main/ear" text-color="#fff" :router="true">

                    <el-menu-item index="/main/ear">
                        <template #title>
                            <el-icon>
                                <HomeFilled />
                            </el-icon>
                            <span>主页</span>
                        </template>
                    </el-menu-item>
                    <el-sub-menu index="'m' ">
                        <template #title>
                            <el-icon><Comment /></el-icon>
                            <span>预约管理</span>
                        </template>
                        <el-menu-item index="/main/book">
                            <template #title>
                                <el-icon><Document /></el-icon>
                            <span>预约列表</span>
                        </template>
                        </el-menu-item>
                        <el-menu-item index="/main/show">
                            <template #title>
                                <el-icon><Coin /></el-icon>
                            <span>数据统计</span>
                        </template>
                        </el-menu-item>
                    </el-sub-menu>
                    <el-sub-menu index="'z' ">
                        <template #title>
                            <el-icon>
                                <Shop />
                            </el-icon>
                            <span>客房管理</span>
                        </template>
                        <el-menu-item index="/main/roomlist">
                            <template #title>
                                <el-icon>
                                    <Notebook />
                                </el-icon>
                                <span>客房列表</span>
                            </template></el-menu-item>
                        <el-menu-item index="/main/foodlist"><template #title>
                                <el-icon>
                                    <KnifeFork />
                                </el-icon>
                                <span>套餐列表</span>
                            </template></el-menu-item>
                    </el-sub-menu>
                    <el-sub-menu index="'m9' ">
                        <template #title>
                            <el-icon>
                                <Avatar />
                            </el-icon>
                            <span>住客管理</span>
                        </template>
                        <el-menu-item index="/main/user"><template #title>
                                <el-icon>
                                    <UserFilled />
                                </el-icon>
                                <span>住客列表</span>
                            </template></el-menu-item>
                    </el-sub-menu>
                    <el-sub-menu index="'m8' ">
                        <template #title>
                            <el-icon>
                                <Tools />
                            </el-icon>
                            <span>管理员管理</span>
                        </template>
                        <el-menu-item index="/main/admin">
                            <template #title>
                                <el-icon>
                                    <Stamp />
                                </el-icon>
                                <span>管理员列表</span>
                            </template></el-menu-item>
                    </el-sub-menu>



                </el-menu>
            </el-aside>
            <el-container >
                <!-- 头部 -->
                <el-header class="header">
                    <div class="logo"></div>
                <div class="title">
                    <h1>云逸轩酒店预约系统</h1>
                </div>
                <div class="session">
                    <el-menu background-color="#f3f8fe" @select="userMenuSelect">
                        <el-sub-menu index="user">
                            <template #title>
                                <el-icon>
                                <Stamp />
                            </el-icon>
                                {{ usernamea.username }}
                            </template>
                            <el-menu-item  @click="editinfo">修改信息</el-menu-item>
                            <el-menu-item @click="editinfo">重置密码</el-menu-item>
                            <el-menu-item index="logout">退出</el-menu-item>
                        </el-sub-menu>
                    </el-menu>
                </div>
                </el-header>
                <!-- 主体 -->
                <el-main class="main">
                    <router-view></router-view>
                </el-main>
            </el-container>
        </el-container>
 
</template>
<script setup>
import { useRouter } from 'vue-router';
import { ref } from 'vue';
import { Stamp, UserFilled, Avatar, HomeFilled, Tools, Shop, Notebook ,Comment,KnifeFork,Document,Coin} from '@element-plus/icons-vue';
import { clear } from '../api/jwtApi';
let usernamea=ref({
    username:sessionStorage.getItem("username")
});
const router=useRouter();
//点击用户菜单时触发
function userMenuSelect(menu) {
    if (menu === "logout") {//退出
         clear();
        // //location.href = "/index";
        router.push("/login");
    }
}
function editinfo(){
    alert('请稍后重试');
}
</script>
<style scoped>
.outer {
    height: 100%;
   
}

.aside {
    
    width: 200px;
    background-color: #545c64;

}

.left {
    width: 100%-200px;
    height: 100%;
}

.header {
    background-color: #f3f8fe;
    border-bottom: 1px solid #ccc;
    height: 70px;
    padding-left: 5px;
}

.main {
    /* height: 100%-70px; */
    background-color: rgb(246, 246, 210);
}
.header {
    background-color: #f3f8fe;
    border-bottom: 1px solid #ccc;
    display: flex;
    flex-direction: row;
    padding-left: 5px;
    height: 70px;
}

.header>.title {
    flex-grow: 1;
   
}

.header>.title>h1 {
    font-size: 24px;
    margin: 15px 0;
}

.header>.logo {
    width: 120px;
    flex-shrink: 0;
    margin-left: 5px;
    box-sizing: border-box;
    padding: 10px;
    background: url("@/assets/logo.jpg") no-repeat center center/contain;
}

.header>.session {
    width: 150px;
    flex-shrink: 0;
    z-index: 999;

}
</style>